<!DOCTYPE html>
<html>
	<!--备份助记词3-->
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>备份助记词</title>
		<link rel="stylesheet" type="text/css" href="skin/css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="skin/css/animate.css"/>
		<style type="text/css">
			#app>h1,#app>p{
				font-size: 18px;
				color: rgba(51, 51, 51, .9);
				text-align: center;
			}
			#app>h1{
				padding-top:50px; 
				padding-bottom:15px; 
				opacity: .7;
			}
			#app>p{
				font-size: 15px;
				line-height: 25px;
				opacity: .5;
			}
			#show-words{
				margin:25px 0;
				padding:20px 10px;
				font-size: 15px;
				line-height: 25px;
				background: #EAF1FE; 
				color: rgba(51, 51, 51, .6);
			}
			.words-con{
				display: flex;
				flex-wrap: wrap;				
			}
			.words-con>p{
				display: flex;
				justify-content: center;
				flex:0 0 25%;
				margin-bottom:30px;
				text-align: center;
			}
			.words-con>p>span{
				display: inline-block;
				width: 80%;
				padding: 4px 0;
				font-size: 16px;
				color: rgba(51,51,51,.6);
				border-bottom: 1px solid #3573FA;
			}
			.button{
				display: block;
				width: 100%;
				height: 30px;
				margin: 30px 0;
				text-align: center;
				border-radius: 20px;
				border: none;
				outline: none;
				background: #3573FA;
				color: white;
			}
			
		</style>
	</head>
	
	
	<body>
		<div id="app">
			<h1>确认你的钱包助记词</h1>
			<p>请按顺序点击助记词，以确认你的备份助记词正确</p>
			<div id="show-words" v-text='inputKeyArr.join(" ")'>
				jkldsjf sdkhjf sdfhuij ehfuia
			</div>
			<div class='words-con'>
				<p v-for='(val,index) in keys' :key='index' @click="inputKey(val,$event)">
					<span v-text='val' :style="{'background':(inputKeyArr.indexOf(val)!= -1)?'#5284FA':''}" >ic</span>
				</p>
			</div>
			<button class='button' @click="next">确认</button>
		</div>
		<script src="skin/js/back.js" type="text/javascript" charset="utf-8"></script>
		<script src='skin/js/jquery-3.3.1.min.js'></script>
		<script src="skin/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="skin/js/comm.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:'#app',
				data:{
					inputKeyArr:[],
					keys:['key','dai','dfa','rrr','saa','rarar','eeee','qqqq','dasdf','sdfas','uuuuu','hhhhh']
				},
				methods:{
					next:function(){
						if(this.inputKeyArr.join('')!=this.keys.join('')){
							//助记词验证不通过
							toast('助记词顺序错误');
							return;
						}
						var style=viewTitle(true,'#3573fa','备份钱包','#ffffff');  
						plus.webview.open('backup-wallet.html','backupWallet',style,'slide-in-right');
					},
					//助记词点击事件
					inputKey(key,ev){
						var el=$(ev.target);
						el.addClass('animated bounceIn');
						setTimeout(function(){
							el.removeClass('animated bounceIn');
						},900);
						var indexOf=this.inputKeyArr.indexOf(key);
						indexOf == -1?this.inputKeyArr.push(key):this.inputKeyArr.splice(indexOf,1);
					}
				}
			});
		</script>
	</body>
</html>


